
<template>
    <div class="iframe-cont">
        <div class="content">
            <el-page-header @back="$router.back(-1)" :content="form.id?'运营商编辑':'新增运营商'"></el-page-header>
            <el-divider></el-divider>
            <div class="title">基本信息</div>
            <el-form ref="form" label-position="right" size="small" label-width="120px" :rules="rules" :model="form">
                <el-form-item label="运营商名称:" prop="operName">
                    <el-input class="form-item" v-model="form.operName" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="联系人姓名:" prop="contactName">
                    <el-input class="form-item" v-model="form.contactName" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="联系人手机号:" prop="contactPhone">
                    <el-input class="form-item" type="number" v-model="form.contactPhone" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="收款方式:" prop="operType">
                    <el-radio v-model="form.operType" :label="0" @change="form.thirdParam=''">微信商户号收款</el-radio>
                    <el-radio v-model="form.operType" :label="1" @change="form.thirdParam=''">个人收款</el-radio>
                    <el-radio v-model="form.operType" :label="2" >第三方商户</el-radio>
                </el-form-item>
                <el-form-item label="配置参数:" prop="thirdParam" v-if="form.operType===2">
                    <el-input class="form-item" type="textarea" v-model="form.thirdParam"  placeholder="请输入配置参数"></el-input>
                </el-form-item>
            </el-form>
            <div style="margin: 40px 20px;">
                <el-button style="width: 120px;" size="small" @click="goBack">取 消</el-button>
                <el-button style="width: 120px;" size="small" type="primary" @click="add">{{form.id?'修 改':'添 加'}}</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import {isPhoneNum} from "@/utils";
    import {Message} from "element-ui";
    import {getDicts} from "@/api/common";

    const  validatePhone = (rule, value, callback) => {
        if(!isPhoneNum(value)) {
            callback(new Error('请输入正确的手机号码'));
        }
    };
    export default {
        name: "detail",
        data() {
            return {
                activeName: '1',
                form: {
                    operName: null,
                    contactName: null,
                    contactPhone: null,
                    thirdParam: null,
                    operType: null,
                },
                rules: {
                    operName: [
                        { required: true, message: '请输入运营商名称', trigger: 'blur' },
                    ],
                    contactName: [
                        { required: true, message: '请输入联系人姓名', trigger: 'blur' },
                    ],
                    contactPhone: [
                        { required: true, message: '请输入联系人手机号', trigger: 'blur' },
                    ],
                    operType: [
                        { required: true, message: '请选择收款方式', trigger: 'blur' },
                    ],
                    thirdParam: [
                        { required: true, message: '请输入配置参数', trigger: 'blur' },
                    ]
                },
                options: [
                    {label: 123, value: 456}
                ]
            };
        },
        created() {
            if(this.$route.query.id) {
                this.form = {
                    ...this.$route.query
                }
            }
        },
        methods:{
            add() {
                if(this.form.operType === 2 && !this.form.thirdParam) {
                    Message.warning('请输入配置参数！')
                    return
                }
                this.$refs.form.validate().then(res => {
                    this.$http({
                        url:'/api/operator/submit',
                        data: this.form
                    }).then(res=>{
                        Message.success(this.form.id? '修改成功！':'添加成功！')
                        this.$router.back()
                    });
                })
            },
            goBack() {
                this.$router.back()
            },
        }
    }
</script>

<style scoped>
.title {
    font-weight: bold;
    margin-bottom: 20px;
}
.form-item {
    width: 300px;
}
</style>
